@for $i from 10 through 100 {
    .mt-#{$i} {
        margin-top: #{$i}px;
    }

    .mb-#{$i} {
        margin-bottom: #{$i}px;
    }

    .ml-#{$i} {
        margin-left: #{$i}px;
    }

    .mr-#{$i} {
        margin-right: #{$i}px;
    }
}

@for $i from 10 through 100 {
    .pt-#{$i} {
        padding-top: #{$i}px;
    }

    .pb-#{$i} {
        padding-bottom: #{$i}px;
    }

    .pl-#{$i} {
        padding-left: #{$i}px;
    }

    .pr-#{$i} {
        padding-right: #{$i}px;
    }
}

@for $i from 1 through 60 {
    .font-size-#{$i * 2} {
      font-size: #{($i * 2) + 10}px;
    }
}

@mixin font-sizes($start: 10px, $end: 60px, $step: 2px) {
    @for $i from 1 through ($end - $start) / $step {
      .font-size-#{$start + ($i * $step)} {
        font-size: calc(#{$start} + (#{$i} * #{$step}));
      }
    }
}